<template>

  <div class="mian">
    <ul class="tab border-bottom">
      <li class="click">综合</li>
      <li>平均工资</li>
      <li>需求量</li>
      <li>职位类别</li>
    </ul>
    <ul class="list">
      <li class="li border-bottom">
        <span class="li-left"></span>
        <div class="li-middle">
          <h3 @click="tabDetail">首席财务官CFO</h3>
          <br>
          <span class="middle-text">三年平均薪资</span>
          <span class="text-s">一线10000<span class="vs">VS</span>本地10000</span>
        </div>
        <div class="li-right">
          <span class="right-text">需求量(人)</span>
          <span class="text-s">一线10000<span class="vs">VS</span>本地10000</span>
        </div>
      </li>
      <li class="li border-bottom">
        <span class="li-left"></span>
        <div class="li-middle">
          <h3 @click="tabDetail">首席财务官CFO</h3>
             <br>
          <span class="middle-text">三年平均薪资</span>
          
          <span class="text-s">一线10000<span class="vs">VS</span>本地10000</span>
        </div>
        <div class="li-right">
          <span class="right-text">需求量(人)</span>
          <span class="text-s">一线10000<span class="vs">VS</span>本地10000</span>
        </div>
      </li>
      <li class="li border-bottom">
        <span class="li-left"></span>
        <div class="li-middle">
          <h3 @click="tabDetail">首席财务官CFO</h3>
             <br>
          <span class="middle-text">三年平均薪资</span>
        
          <span class="text-s">一线10000<span class="vs">VS</span>本地10000</span>
        </div>
        <div class="li-right">
          <span class="right-text">需求量(人)</span>
      
          <span class="text-s">一线10000<span class="vs">VS</span>本地10000</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "DetailMiddle",
  data() {
    return {};
  },
  props: {
    details: {
      type: String,
      required: true
    }
  },
  methods: {
    tabDetail() {
      this.$emit("getview", 2);
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~styles/variables';

.tab {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  min-width: 6.35rem;
  margin-left: 0.2rem;
  padding: 0.18rem 0;
}

.tab li {
  margin-left: 0.5rem;
  flex:1
}

.click {
  color: $mainBlue;
}

.li {
  display: flex;
  justify-content: start;
  padding: 0.3rem 0.7rem;

  .li-left {
    background-color: red;
    width: 0.5rem;
    height: 0.5rem;
  }

  .li-middle {
    display: flex;
    flex-direction: column;
    margin: 0 1rem 0 0.25rem;
  }

  .li-middle h3 {
    cursor: pointer;
    font-size:0.24rem;

   .middle-text {
      font-size: 0.2rem !important;
    
      margin: 0.2rem 0 0.15rem 0;
    }
  }
  .li-middle h3:hover{
    color:#d42525;
  cursor:pointer;
  }

  .li-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .right-text {
      font-size: 0.20rem;
      margin: 0.2rem 0 0.15rem 0;
    }
  }

  .text-s {
    font-size: 0.2rem;
  }

  .vs {
    font-size: 0.25rem;
    color: $mainBlue;
    margin: 0 0.06rem;
  }
}
</style>
